<template>
<div v-show="flag1">
  <el-input v-model="code" placeholder="请输入神秘代码"></el-input>
  <el-button type="primary" @click="exam">确定</el-button>
</div>
  <div v-show="flag3">
    <div style="margin: 5px">
      <el-button type="primary" icon="el-icon-search" @click="flag2=true" style="width: 80px">添加医生</el-button>
      <el-button type="primary" style="margin: 5px" @click="getAllDoctor">显示全部医生</el-button>
      <el-row>
      <el-input v-model="input" style="width: 30%" placeholder="请输入医生姓名"/>
      <el-button type="primary" icon="el-icon-search" style="width: 55px" @click="selectDoctor">搜索</el-button>
      </el-row>
    </div>
    <el-table :data="doctorDatalist.slice((currentPage - 1) * pageSize, currentPage * pageSize) " border style="width: 100%">
      <el-table-column prop="doctorId" label="医生id" width="200" />
      <el-table-column prop="doctorName" label="医生姓名" width="200" />
      <el-table-column prop="doctorDep" label="所属科室" width="200" />
      <el-table-column prop="doctorTele" label="联系电话" width="250" />
      <el-table-column prop="doctorPos" label="职位" width="260"/>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="deleteDoctor(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="flag2" title="添加医生" width="50%" >
      <el-form ref="form2" :model="form2"  label-width="80px">
            <el-form-item label="医生姓名">
              <el-input v-model="form2.doctorName"></el-input>
            </el-form-item>
            <el-form-item label="电话号">
              <el-input v-model="form2.doctorTele"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form2.doctorPassword"></el-input>
            </el-form-item>
            <el-form-item label="科室">
              <el-input v-model="form2.doctorDep"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="form2.doctorPos"></el-input>
            </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-search" @click="addDoctor">确定</el-button>
    </el-dialog>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          layout="total,prev,pager,next,jumper"
          :total="doctorDatalist.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  name: "GM",
  data() {
    return {
      code: "",
      form2: {},
      flag1: true,
      flag2: false,
      flag3: false,
      doctorDatalist: [],
      currentPage: 1,
      pageSize: 5,
      message: "",
      input: "",
    }
  },
  created() {
    this.getAllDoctor();
  },

  methods: {
    exam() {
      if (this.code == 666) {
        this.flag1=false;
        this.flag3 = true;
        this.code = "";
      }
      else {
        ElMessage.error('错误代码，请重新输入');
        this.code = "";
      }
    },
    getAllDoctor() {
      axios.get("/api/doctor").then((res) => {
        this.doctorDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    addDoctor() {
      axios.post("/api/doctor", this.form2).then((res) => {
        if (res.data.code == 20011) {
          this.form2 = {};
          this.flag2=false;
          this.$message.success("添加成功");
        } else if (res.data.code == 20010) {
          this.$message.error("添加失败");
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        this.getAllDoctor();
      });
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    selectDoctor() {
      axios.get("/api/doctor/"+this.input).then((res) => {
        if(res.data.code==20041){
          this.doctorDatalist = res.data.data;
          this.message = res.data.msg;
          this.data.splice(1, 0);
        }
        else {
          this.doctorDatalist=[];
          this.input="";
        }

      });
    },
    deleteDoctor(row) {
      //1.弹出提示框
      this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=>{
        //2.做删除业务
        axios.delete("api/doctor/"+row.doctorId).then((res)=>{
          this.$message.success("删除成功");
        }).finally(()=>{
          this.getAllDoctor();
        });
      }).catch(()=>{
        //3.取消删除
        this.$message.info("取消删除操作");
      });
    }
  }
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>